<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>eBarrio</title>
		<script src="<?php echo base_url(); ?>js/jquery-1.7.1.min.js"></script>
		<script src="<?php echo base_url(); ?>js/jquery-ui-1.8.18.custom.min.js"></script>

		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
		<script src="<?php echo base_url(); ?>/js/ui_maps/jquery.ui.map.full.min.js" type="text/javascript"></script>

		<link rel="stylesheet" href="<?php echo base_url(); ?>css/ui/jquery-ui-1.8.18.custom.css">
		<link rel="stylesheet" href="<?php echo base_url(); ?>css/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css">
		<link rel="stylesheet" href="<?php echo base_url(); ?>css/ebarrio.css">

		<?php
		require_once('/recaptcha/recaptchalib.php');
		$captcha_publickey = $publickey;
		$error_captcha = null;
		?>

	</head>
	
	<body id="ebarrio_user">
		<div id="cabecera">
			<div id="opciones">
				<div class="left"></div>
				<ul>
					<li>
						<?php
						echo '<a class="menu" id="mapa" title="Mapa" href="#">Mapa</a>';
						?>
						<br>
						<img id="mapa_cerrar" class="cerrar_desactivado" src="<?php echo base_url(); ?>/img/icon_close.png">
					</li>
						<li>
						<?php
						echo '<a class="menu" id="logarse" title="Login" href="' . $enlace . '">' . $username . '</a>';
						?>
					</li>
					<li>
						<?php
						echo '<a class="menu" id="registro" title="Registro" href="' . $registro . '">Registrar</a>';
						?>
					</li>
				</ul>
				<div class="right"></div>
			</div>
		</div>

		<script type="text/javascript">


		$(document).ready(function() {

			// Eventos del menu
			
			$('#mapa_cerrar').click(function(e){
				e.preventDefault();
				$( "#mapa_google" ).dialog( "close" );
			});
			// Fin Eventos del menu

			var $dialog_registro =$( "#dialog-registro" );
			var $dialog_login =$( "#login" );
			var $dialog_mapagoogle =$( "#mapa_google" );



/*
//Si se selecciona se mantiene seleccionado hasta que se pulse otro elemento del menu
                $("li a").click(function(e){
                    e.preventDefault();
                    $(".selected").removeClass("selected");
                    $(this).addClass("selected");
                });
                 */

				$('#opciones ul li a').each(function() {

					var pagina = $(this).attr("href");
					var identificador = $(this).attr("id");
					if (identificador == 'registro') {
// REGISTRARSE
						var email = $( "#dialog-registro #email" ),
							cod_postal = $( "#dialog-registro #cod_postal" ),
							password1 = $( "#dialog-registro #password1" ),
							password2 = $( "#dialog-regsitro #password2" );

						var $link = $(this).click(function(e) {
							e.preventDefault();

							if ($dialog_registro.dialog("isOpen")) {
								$dialog_registro.dialog('moveToTop');
								
							}else{
								$dialog_registro.dialog( "open" );
							};
						});

					}else if(identificador == 'logarse'){
//ENTRAR - LOGARSE
							
						$(this).click(function(e) {
							e.preventDefault();

							if ($dialog_login.dialog("isOpen")) {
								$dialog_login.dialog('moveToTop');
								
							}else{
								$dialog_login.dialog( "open" );
							};
						});

					}else if(identificador == 'mapa'){
// mapa
//                        var $link = $(this).one('click', function(e) {
						$(this).click(function(e) {
							e.preventDefault();

							if ($dialog_mapagoogle.dialog("isOpen")) {
								$dialog_mapagoogle.dialog('moveToTop');
								
							}else{
								$dialog_mapagoogle.dialog( "open" );
								$('#mapa_cerrar').addClass('cerrar_activado');

//	ejemplo con jquery.ui.map
//                            var yourStartLatLng = new google.maps.LatLng(39.456326, -0.389961);
//                            $('#map_canvas').gmap({'center': yourStartLatLng});

// Directamente con GoogleMaps
 								var latlng = new google.maps.LatLng(39.456326, -0.389961);
								var myOptions = {
										zoom: 16,
										center: latlng,
										mapTypeId: google.maps.MapTypeId.ROADMAP
									};
								var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
							};
						}); // fin del Click

					}; // Fin if del "mapa"
				}); // Fin $('#opciones ul li a')

///////////////////////////////////////////////////////////////////////////////////////
//
// FUNCIONES
//
///////////////////////////////////////////////////////////////////////////////////////


				function registroRegistrarse(){

					var email = $( "#dialog-registro #email" ),
						cod_postal = $( "#dialog-registro #cod_postal" ),
						password1 = $( "#dialog-registro #password1" ),
						password2 = $( "#dialog-registro #password2" );

					$( "#cargando" ).dialog( "open" );

					$.ajax({
						url: "<?php echo site_url(); ?>ebarrio/registrar",
						data: {	email: email.val(),
								cod_postal: cod_postal.val(),
								password1: password1.val(),
								password2: password2.val()
								},
						type: "POST",
						dataType: "json",
						success: function(source){

							switch (source.coderror) {
								case 0:
									$dialog_registro.dialog( "close" );
									$( "#aviso-correcto" ).dialog( "open" );
									break

								default:
									$( "#error" ).dialog( "open" );
							}
						},
						error: function(source){
							alert("ERROR");
						}
					});
					$( "#cargando" ).dialog( "close" );

				};	// Fin función registroRegistrarse


				function loginEntrar(){
					
					var email = $( "#login #email" );
					var password = $( "#login #password" );

					if($("#login #recordar").is(':checked')) {
						recordar = 1;
					}else{
						recordar = 0;
					}
					$( "#cargando" ).dialog( "open" );

					$.ajax({
						url: "<?php echo site_url(); ?>ebarrio/login",
						data: {	email: email.val(),
								password: password.val(),
								recordar: recordar
								},
						type: "POST",
						dataType: "json",
						success: function(source){

							switch (source.coderror) {
								case 0:
									$( "#logarse" ).text(source.username);
									$dialog_login.dialog( "close" );
									$( "#aviso-correcto" ).dialog( "open" );
									break

								default:
									$( "#error" ).dialog( "open" );
							}
						},
						error: function(source){
							alert("ERROR");
						}
					});

					$( "#cargando" ).dialog( "close" );
				}	// Fin función loginEntrar


///////////////////////////////////////////////////////////////////////////////////////
//
// DIALOGs
//
///////////////////////////////////////////////////////////////////////////////////////


				$dialog_registro.dialog({
					autoOpen: false,
//					title: $link.attr('title'),
					title: "Registro",
					width: 350,
					height: 510,
					modal: false,
					buttons: {
						"Registrarse": function() {
							registroRegistrarse();
						},
						Cancel: function() {
							$( this ).dialog( "close" );
							Recaptcha.reload();
						}
					},
					close: function() {
						$( "#dialog-registro #email" ).val("");
						$( "#dialog-registro #cod_postal" ).val("");
						$( "#dialog-registro #password1" ).val("");
						$( "#dialog-registro #password2" ).val("");

						Recaptcha.reload();
					}
				});


				$dialog_login.dialog({
					autoOpen: false,
					title: "Logarse",
					width: 350,
					modal: false,
					buttons: {
						"Entrar": function() {
							loginEntrar();
						}, // Fin boton Entrar
						Cancel: function() {
							$( this ).dialog( "close" );
						}
					},
					close: function() {
						$( "#login #email" ).val("");
						$( "#login #password" ).val("");
					}
				}); // Fin Dialogo Logarse


				$dialog_mapagoogle.dialog({
					autoOpen: false,
//					title: $link.attr('title'),
					title: 'Mapa',
					width: 350,
					height: 510,
					modal: false,
					resizable: false,
					buttons: {
						Cancel: function() {
							$( this ).dialog( "close" );
							Recaptcha.reload();
						}
					},
					close: function() {
						$('#mapa_cerrar').removeClass('cerrar_activado')
					}
				});


				$( "#cargando" ).dialog({
					autoOpen: false,
					modal: true});

				$( "#aviso-correcto" ).dialog({
					autoOpen: false,
					modal: true,
					buttons: {
						Ok: function() {
							$( this ).dialog( "close" );
						}
					}
				});

				$( "#error" ).dialog({
					autoOpen: false,
					modal: true,
					buttons: {
						Ok: function() {
							$( this ).dialog( "close" );
						}
					}
				});

			}); // Fin $(document).ready

		</script>


		<div id="dialog-registro" title="Quiero saber más" style="display: none;">
			<p class="validateTips">Todos los campos son obligatorios.</p>
			<form>
				<fieldset>
					<label for="email">Email</label>
					<input type="text" name="email" id="email" value class="text ui-widget-content ui-corner-all" />

					<label for="cod_postal">Código Postal</label>
					<input type="text" name="cod_postal" id="cod_postal" value class="text ui-widget-content ui-corner-all" />

					<label for="password1">Contraseña</label>
					<input type="password" name="password1" id="password1" value class="text ui-widget-content ui-corner-all" />

					<label for="password2">Repita la contraseña</label>
					<input type="password" name="password2" id="password2" value class="text ui-widget-content ui-corner-all" />
					<?php
						//escribimos en la página lo que nos devuelve recaptcha_get_html()
						echo recaptcha_get_html($captcha_publickey, $error_captcha);
					?>
				</fieldset>
				<br>
			</form>
		</div>


		<div id="login" title="Quiero saber más" style="display: none;">
			<p class="validateTips">Todos los campos son obligatorios.</p>
			<form>
				<fieldset>
					<label for="email">Email</label>
					<input type="text" name="email" id="email" value class="text ui-widget-content ui-corner-all" />

					<label for="password">Contraseña</label>
					<input type="text" name="password" id="password" value class="text ui-widget-content ui-corner-all" />

					<label for="recordar">Recordar</label>
					<input type="checkbox" name="recordar" id="recordar" value="1" />

				</fieldset>
			</form>
		</div>


		<div id="mapa_google" title="Mapa de Google" style="display: none;">
			<div id="map_canvas" style="width:100%; height:100%"></div>
		</div>


		<div id="cargando" title="En Proceso" style="display: none;">
			<p>Realizando el registro.</p>
		</div>

		<div id="aviso-correcto" title="Preregistro realizado"  style="display: none;">
			<p>
				<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
				Se ha enviado un mail a la dirección introducida.
			</p>
			<p>Para completar el preregistro ha de pulsar sobre el enlace <b>ACTIVAR</b> del correo que reciba.</p>
		</div>

		<div id="error" title="Error inesperado" style="display: none;">
			<p>
				<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
				Se ha producido un error inesperado en su preregistro.
			</p>
			<p>Intentelo de nuevo. Si el error persiste, pongase en contacto con nosotros en la siguiente dirección:</p>
			<p><b>preresgisro-soporte@ebarrio.es</b></p>
		</div>

	</body>
</html>
